<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" class="demo-form-inline">
          <div class="cg">
            <el-form-item label="学科名称">
              <el-input style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button>清除</el-button>
              <el-button type="primary">搜索</el-button>
            </el-form-item>
          </div>
          <el-button type="success" @click="dialogVisible = true">
            <i class="el-icon-edit"></i>
            新增学科</el-button
          >
        </el-form>
        <div class="cor">
          <div class="num"><i class="el-icon-info"></i>数据一共{{counts}}条</div>
        </div>
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="序号" >
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" >
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column  label="创建日期">
            {{timer}}
             </el-table-column>
          <el-table-column  label="前台是否显示">
            {{isFrontDisplay===1?'是':'否'}}
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column class="a"  label="操作" width="300">
            <el-link type="primary" class="cell">学科分类</el-link>
            <el-link type="primary" class="cell">学科标签</el-link>
            <el-link type="primary" class="cell">修改</el-link>
            <el-link type="primary" class="cell">删除</el-link>
          </el-table-column>
        </el-table>
        <el-pagination

      @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>

        <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
<el-form ref="form"  label-width="80px">
  <el-form-item label="学科名称">
    <el-input v-model="input" placeholder="请输入学科名称"></el-input>
  </el-form-item>
   <el-form-item label="是否显示">
<el-switch
  v-model="isflag"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addxk">确 认</el-button>
  </span>

</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      list: [], // 从接口处取回
      form: {
        name: 'abc',
        province: '潜江' // 从接口处取回
      },
      page: 1,
      pagesize: 10,
      counts: null,
      currentPage4: 4,
      timer: null,
      dialogVisible: false,
      input: '',
      isflag: true,
      isFrontDisplay: null
    }
  },
  created () {
    // ajax
    // this.$store.dispatch('setlist')
    this.setlist()

    // console.log(this.list)
    // this.list = res.list
    // this.form.name = res.name
    // this.form = { name: res.name }
    // // this.$set(this.form, 'province', res.province)
    // this.form.province = res.province
  },
  methods: {

    async setlist (v) {
      const page = v
      // console.log(v)
      const res = await list({
        page
      })
      console.log(res)
      this.counts = res.data.counts
      this.list = res.data.items
      this.page = res.data.page
      this.pagesize = res.data.pagesize
      this.currentPage4 = res.data.pages
      this.fn()
    },
    fn () {
      this.list.forEach(item => {
        this.isFrontDisplay = item.isFrontDisplay
        const d = new Date(item.addDate)
        const yy = d.getFullYear()
        let mm = d.getMonth() + 1
        mm = mm < 10 ? '0' + mm : mm
        let dd = d.getDate()
        dd = dd < 10 ? '0' + dd : dd
        const timer = yy + '/' + mm + '/' + dd
        this.timer = timer
      })
    },
    handleCurrentChange (v) {
      this.setlist(v)
    },
    async addxk () {
      let a
      if (this.isflag) {
        a = 1
      } else {
        a = 0
      }
      await add({
        subjectName: this.input,
        isFrontDisplay: a
      })
      this.dialogVisible = false
      this.setlist()
    }

  }
}
</script>

<style scoped>
.demo-form-inline {
  height: 35px;
  display: flex;
}
.cor {
  border-radius: 5px;
  margin-top: 10px;
  background-color: #f4f4f5;
}

.num {
  padding: 10px;
  color: #ccc;
  font-size: 13px;
}
.el-icon-info {
  margin-right: 5px;
}
.cg {
  flex: 1;
}
.cell {
     -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;
}

</style>
